<template>
  <div class="menu-vertical">
    <ta-menu :mode="state.menuLeftStyle == 'dropdown' ? 'inline': 'vertical'" :inlineCollapsed="collapsed" theme="dark" :inlineIndent="10"
             :data="menuList" :props="props" :selectedKeys="[state.activeMenuTwo || '']" @click="clickMenu" :style="{width:'100%'}"></ta-menu>
  </div>
</template>
<script type="text/jsx">
import {mapGetters} from 'vuex'
export default {
  name: 'menu-vertical',
  data () {
    return {
      props: {
        key: 'id',
        title: 'name'
      }
    }
  },
  computed: {
    ...mapGetters({
      state: 'getStateValue',
      collapsed: 'getCollapsed',
      menuList: 'getMenuListLeft'
    })
  },
  methods: {
    clickMenu ({key, keyPath}) {
      this.$store.dispatch('setActiveMenu', {level: 'two', menuId: key})
      let tabMenu = this.menuList
      for (let i = keyPath.length - 1; i > -1; i--) {
        tabMenu = i ? tabMenu.filter(item => item.id == keyPath[i])[0].children : tabMenu.filter(item => item.id == keyPath[i])[0]
      }
      this.$store.dispatch('addTabMenuList', {value: tabMenu})
      /* 面包屑名称 */
      if (this.state.barType == 'breadcrumb') {
        let breadcrumb = []
        const {menuType, menuList, activeMenuOne} = this.state
        let leftMenu = this.menuList
        if (menuType == 'leftTop') {
          breadcrumb.push(menuList.filter(item => item.id == activeMenuOne)[0].name)
        }
        for (let i = keyPath.length - 1; i > -1; i--) {
          leftMenu = leftMenu.filter(item => item.id == keyPath[i])[0]
          breadcrumb.push(leftMenu.name)
          leftMenu = i ? leftMenu.children : leftMenu
        }
        this.$store.dispatch('setStateValue', {breadcrumb: breadcrumb})
      }
    }
  }
}

</script>
<style type="text/scss" lang="scss">
   $bgcolor:#001529;
  .menu-vertical {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    @include beautifyScrollbar(lighten($bgcolor,10%),#001529,lighten($bgcolor,40%));
    .ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title, .ant-menu-inline-collapsed>.ant-menu-item {
      text-align: center; padding: 0!important;
    }
  }
</style>
